﻿/* Variables */
@baseColor: #1F7FBE;
@lightColor: #22A2F6;
@headerHeight: 245px;

/* General Styles */
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    background-color: #000;
}

body, div, span, p, td {
    font-family: "Segoe UI", sans-serif;
}

h1 {
    margin-top: 5px;
    font-size: 1.75em;
    font-weight: bold;
    color: @baseColor;
}

.clearfix {
    display: inline-block;
    width: 100%;
}

input.button {
    border-radius: 0;
    background: @baseColor;
    color: #fff;
    border: 0 solid #000;
    margin: 3px 0;
    height: 24px;
    cursor: pointer;
}

input.button:hover {
    background: @lightColor;
}

::-webkit-scrollbar {
    width: 13px;
    height: 13px;
}

::-webkit-scrollbar-track {
    border-left: 1px solid @baseColor;
    border-right: 1px solid @baseColor;
    border-top: none;
    border-bottom: none;
}

::-webkit-scrollbar-thumb {
    background-color: @baseColor;
    border: 2px solid transparent;
    background-clip: content-box;
}

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"] + label span {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: -2px 6px 0 0;
    vertical-align: middle;
    background: url([[BASE_PATH_CSS]]images/checkbox-unchecked.png) left top no-repeat;
    cursor: pointer;
}

input[type="checkbox"]:checked + label span {
    background: url([[BASE_PATH_CSS]]images/checkbox-checked.png) left top no-repeat;
}

/* Specific Sections */

#container {
    position: relative;
    /*display: table;*/
    height: 100%;
    width: 300px;
    float: right;
}

#header {
    /*display: table-row;*/
    position: absolute;
    height: @headerHeight;
    overflow: hidden;
    background: #fff;
    margin-bottom: 5px;

    #headerInner {
        visibility: hidden;
        background-color: #fff;

        #destinyTracker {
            border-top: 1px solid black;
            border-bottom: 1px solid black;
            padding: 5px;
            height: 64px;

            #destinyTokenContainer {
                position: relative;
                float: left;
                height: 64px;
                width: 230px;
                overflow: auto;

                .destiny-token {
                    margin-right: 5px;
                    width: 32px;
                    height: 32px;
                    cursor: pointer;
                }

                #destinyWatermark {
                    position: absolute;
                    left: 45px;
                    top: 7px;
                    font-size: 2em;
                    font-weight: bold;
                    opacity: 0.05;
                }

                ::-webkit-scrollbar-track {
                    border-top: 1px solid @baseColor;
                    border-bottom: 1px solid @baseColor;
                }
            }

            #destinyButtonContainer {
                float: right;
                width: 60px;

                input.button {
                    width: 60px;
                    height: 26px;
                }
            }
        }

        #buttonContainer {
            padding: 5px;

            input.button#resetDiceQuantities {
                width: 110px;
                float: right;
                margin-right: 2px;
                height: 32px;
                margin-top: 0;
            }

            input.button#roll {
                width: 92px;
                height: 40px;
                margin: 0;
                font-weight: bold;
                font-size: 1.25em;
            }

            #resetAfterRoll + label {
                float: left;
                position: relative;
                top: 4px;
            }

            die-container:nth-child(3n) .die-container {
                margin-right: 0;
            }

            .die-container {
                float: left;
                border: 1px solid fade(@lightColor, 30%);
                background: fade(@lightColor, 5%);
                margin-right: 6px;
                margin-bottom: 3px;
                padding: 3px 7px;

                img, div, input, span {
                    float: left;
                    display: block;
                }

                .die-button {
                    width: 32px;
                    margin-right: 0;
                    margin-bottom: 0;
                    vertical-align: middle;
                    cursor: pointer;
                }

                .numeric-die-type {
                    width: 32px;
                    height: 32px;
                    text-align: center;
                }

                .qty-text-box {
                    width: 26px;
                    height: 32px;
                    text-align: center;
                    border: none;
                    font-size: 1.4em;
                    color: darken(@baseColor, 20%);
                }

                div.arrow-container {
                    width: 16px;
                    margin-left: 2px;

                    .arrow-up, .arrow-down {
                        cursor: pointer;
                    }

                    .arrow-up {
                        margin: 0;
                    }
                }
            }
        }
    }
}

.content {
    position: absolute;
    top: @headerHeight;
    bottom: 30px;
    width: 100%;
    overflow: hidden;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    background: #fff;

    #outputArea {
        height: 100%;
        width: 100%;
        overflow: auto;
        background-color: #fff;

        .alert {
            color: red;
            padding: 10px;
        }

        .row-wrapper {
            margin: 5px 5px 20px 5px;
            overflow: hidden;

            .image-wrapper {
                float: left;

                .person-image {
                    margin-right: 5px;
                }
            }

            .results-wrapper {
                float: left;

                .symbol {
                    float: left;
                    margin-right: 2px;
                }

                .numeric-result {
                    float: left;
                    margin: 0 1px;
                    padding: 0 3px;
                    border: 1px solid #888888;
                }

                .overall-results {
                    margin-top: 5px;
                    clear: left;
                }
            }
        }

        .standard-die-roll {
            font-size: 1.5em;
        }
    }

    #outputArea.small {
        .row-wrapper {
            margin-bottom: 10px;

            .image-wrapper {
                width: 37px;

                .person-image {
                    width: 32px;
                    height: 32px;
                }
            }

            .results-wrapper {
                width: 236px;

                .symbol {
                    width: 16px;
                    height: 16px;
                }

                .numeric-result {
                    height: 14px;
                    font-size: 1em;
                    line-height: 14px;
                }
            }
        }
    }

    #outputArea.medium {
        .row-wrapper {
            margin-bottom: 15px;

            .image-wrapper {
                width: 53px;

                .person-image {
                    width: 48px;
                    height: 48px;
                }
            }

            .results-wrapper {
                width: 220px;

                .symbol {
                    width: 24px;
                    height: 24px;
                }

                .numeric-result {
                    height: 22px;
                    font-size: 1.25em;
                    line-height: 22px;
                }
            }
        }
    }

    #outputArea.large {
        .row-wrapper {
            .image-wrapper {
                width: 69px;

                .person-image {
                    width: 64px;
                    height: 64px;
                }
            }

            .results-wrapper {
                width: 204px;

                .symbol {
                    width: 32px;
                    height: 32px;
                }

                .numeric-result {
                    height: 30px;
                    font-size: 1.55em;
                    line-height: 30px;
                }
            }
        }
    }
}

#settings-container {
    padding: 5px;

    .settings-label {
        font-weight: bold;
        margin-right: 10px;
    }
}

#footer {
    position: absolute;
    bottom: 0;
    height: 30px;
    width: 100%;
    overflow: hidden;
    background: #fff;

    #footer-inner {
        width: 290px;
        margin: 0 auto;

        input.button {
            width: 120px;
            margin: 3px 10px 3px 0;
            float: left;
        }

        input.button:last-of-type {
            margin-right: 0;
        }

        .settings-button {
            position: relative;
            top: 1px;
            margin-right: 2px;
            float: right;
            height: 28px;
            cursor: pointer;
        }
    }
}
